<template>
    <el-tabs type="border-card">
      <el-tab-pane label="我的试卷">
        <div style="padding: 10px 0px;">
            <p style="font-size: 13px; color: #AAAAAA; margin-bottom: 10px;">从下面我的试卷中选择考试的内容</p>
            <el-input v-model="testPaperName" placeholder="搜索" style="width: 200px;"></el-input>
        </div>
        <el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
                size="small"
                border
				@selection-change="handleSelectionChange">
                <!-- <el-table-column   type="selection" width="35" /> -->
				<el-table-column  prop="testPaperName" label="考试名称"  align="center">
					<template #default="scope">
                        <p>{{scope.row.testSubjects  }}</p>
					<p class="p13"> <i class="iconfont icon-list-alt3 "></i>{{ scope.row.testPaperName }}</p>	
					</template>
				</el-table-column>
                <!-- <el-table-column   label="考试时间"  align="center">
                    <template #default="scope">
                        <p>{{scope.row.startTime  }}</p>
					<p class="p13">{{ scope.row.endTime }}</p>	
					</template>
                </el-table-column> -->
				<el-table-column  label="总分" align="center">
					<template #default="scope">
						<a class="test-success" v-if="scope.row.totalScore>=80">{{ scope.row.totalScore}}</a>
						<a class="test-waring" v-else-if="scope.row.totalScore>=60">{{ scope.row.totalScore}}</a>
						<a class="test-danger" v-else>{{ scope.row.totalScore}}</a>
					</template>
				</el-table-column>
                <el-table-column  prop="citations" label="引用次数"  align="center">
					<template #default="scope">
					<p><a class="test-success" >{{ scope.row.citations }}</a>次
					</p>
					</template>
				</el-table-column>
                <el-table-column label="创建人" align="center">
					<template #default="scope">
					<p>{{  scope.row.modifier }}</p>	
					</template>
				</el-table-column>
				<el-table-column label="操作"  align="center" >
					<template #default="scope">
						<el-button-group class="right-btn">
						   <el-button  @click="usePaper(scope.row)"  v-if="isUse">
                               使用</el-button>
						   <el-button  @click="removePaper(scope.row)"  color="#ED5565"  style="color: #fff;" v-else>
                               移除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	
      </el-tab-pane>
      <el-tab-pane label="他人试卷">
        <div style="padding: 10px 0px;">
            <p style="font-size: 13px; color: #AAAAAA; margin-bottom: 10px;">从下面我的试卷中选择考试的内容</p>
            <el-input v-model="testPaperName" placeholder="搜索" style="width: 200px;"></el-input>
        </div>
        <el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
                size="small"
                border
				@selection-change="handleSelectionChange">
                <!-- <el-table-column   type="selection" width="35" /> -->
				<el-table-column  prop="testPaperName" label="考试名称"  align="center">
					<template #default="scope">
                        <p>{{scope.row.testSubjects  }}</p>
					<p class="p13"> <i class="iconfont icon-list-alt3 "></i>{{ scope.row.testPaperName }}</p>	
					</template>
				</el-table-column>
                <!-- <el-table-column   label="考试时间"  align="center">
                    <template #default="scope">
                        <p>{{scope.row.startTime  }}</p>
					<p class="p13">{{ scope.row.endTime }}</p>	
					</template>
                </el-table-column> -->
				<el-table-column  label="总分" align="center">
					<template #default="scope">
						<a class="test-success" v-if="scope.row.totalScore>=80">{{ scope.row.totalScore}}</a>
						<a class="test-waring" v-else-if="scope.row.totalScore>=60">{{ scope.row.totalScore}}</a>
						<a class="test-danger" v-else>{{ scope.row.totalScore}}</a>
					</template>
				</el-table-column>
                <el-table-column  prop="citations" label="考试人次"  align="center">
					<template #default="scope">
					<p><a class="test-success" >{{ scope.row.citations }}</a>次
					</p>
					</template>
				</el-table-column>
                <el-table-column label="创建人" align="center">
					<template #default="scope">
					<p>{{  scope.row.modifier }}</p>	
					</template>
				</el-table-column>
				<el-table-column label="操作"  align="center" >
					<template #default="scope">
						<el-button-group class="right-btn">
						   <el-button  @click="usePaper(scope.row)"  v-if="isUse">
                               使用</el-button>
						   <el-button  @click="removePaper(scope.row)"  color="#ED5565"  style="color: #fff;" v-else>
                               移除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	
        </el-tab-pane>
      </el-tabs> 
</template>

<script setup>
import { ref, reactive,toRefs } from 'vue';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getPaperK} from '../../../api/exam' ;
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')


//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})
// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getPaperK({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val) => {
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


/*************使用和移除**************** */
const  props = defineProps({
    setTestPaper:String
})
const emit = defineEmits(['update:setTestPaper'])
const isUse  = ref(true)
//使用试卷 
const usePaper = (row)=>{
    emit('update:setTestPaper',row.testPaperName)
   console.log(tableData.value.indexOf(row),'table////')
  
}
//移除试卷
const  removePaper=(row)=>{
    emit('update:setTestPaper','')
 
}
</script >
<style lang="less" scoped>
.test-success{
	font-size: 20px;
	color: #1c84c6;
	font-weight: 700;
}

.test-waring{
	font-size: 20px;
	color: #F8AC59;
	font-weight: 700;
}
.test-danger{
	font-size: 20px;
	color: #ED5565;
	font-weight: 700;
}
</style>